<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 使用$scope 处理升降序</title>
    <script src="../angular.js"></script>

    <style>
        .paixu:hover{
            cursor: pointer;
        }
        .paixu th span:hover{
            /*color : red*/
        }
    </style>
</head>
<body>
<div ng-app="gg" ng-controller="ctrl">

    <table border="1" width="600">
        <tr class="paixu">
            <th ng-click="orderBy('id')">编号
                <span ng-if="status.id">升序</span>
                <span ng-if="!status.id">降序</span>
            </th>
            <th ng-click="orderBy('click')">点击数
                <span ng-if="status.click">升序</span>
                <span ng-if="!status.click">降序</span>
            </th>
            <th ng-click="orderBy('title')">标题
                <span ng-if="status.title">升序</span>
                <span ng-if="!status.title">降序</span>
            </th>
        </tr>
        <tr ng-repeat="(k, v) in data" align="center">
            <td>{{v.id}}</td>
            <td>{{v.click}}</td>
            <td>{{v.title}}</td>
        </tr>
    </table>
</div>


<script>
    var mod = angular.module('gg', []);
    mod.controller('ctrl', ['$scope', '$filter', function ($scope, $filter) {
        $scope.data = [
            {id: 1 ,click : 100, title : '美文'},
            {id: 2 ,click : 80, title : '英语'},
            {id: 3 ,click : 150, title : '高数'}
        ]
        //记录排序状态
        $scope.status = {id:false, click:false, title:false};

        $scope.orderBy = function (field) {
            $scope.status[field] = !$scope.status[field];
            $scope.data = $filter('orderBy')($scope.data, field, $scope.status[field]);
        }
    }])
</script>
</body>
</html>